// pages/index/soundCard/soundCard.js
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    testUrl: '',
    imgPath: '',
    isX: false, // 是否横向显示
    movableH: 0, // 相框高
    movableW: 0, // 相框宽
    imgWidth: 0, // 图片原始宽度
    imgHeight: 0, // 图片原始高度
    dragX: 0, // X轴拖动
    dragY: 0, // Y轴拖动
    scale: 1, // 缩放比例
    p: 1, // 相框高宽比例
  },

  onLoad: function(options) {

    let that = this,
      h,
      w
    wx.getImageInfo({ // 获取图片信息
      src: options.path,
      success: function(res) {
        that.setData({
          isX: res.width > res.height ? true : false,
          imgPath: options.path,
          p: res.height / res.width,
          imgWidth: res.width,
          imgHeight: res.height
        })
      }
    })
  },
  onReady: function() {
    let that = this
    wx.createSelectorQuery().select('#addPic').boundingClientRect(function(rect) {
      console.log(rect)
      that.setData({
        movableH: (rect.height - 6) * 2,
        movableW: (rect.width - 6) * 2
      })
    }).exec()

  },
  uploadDoc(pics) {
    console.log("ds")
    const tempFilePaths = pics;
    wx.uploadFile({
      url: app.globalData.host + '/v3/file/uploadPic', // 仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        const data = res.data
        console.log(res)
        console.log("上传")
        // do something
      }
    })
  },

  dragImg(e) { // 拖动
    console.log('1', e.detail)
    this.setData({
      dragX: e.detail.x,
      dragY: e.detail.y
    })
  },
  scaleImg(e) { // 缩放
    console.log('2', e.detail)
    this.setData({
      // dragX: e.detail.x,
      // dragY: e.detail.y,
      scale: e.detail.scale
    })
  },
  cancel() { // 取消
    console.log('2')
    wx.navigateBack({})
  },
  outputPic: function(e) {

    let that = this,
      w = this.data.movableW / 2 - 6, //rpx -> px
      h = w * this.data.p
    console.log(this.data.movableH, this.data.movableW)
    let ctx = wx.createCanvasContext('picBox') // 创建上下文
    console.log('width=', this.data.imgWidth, 'height=', this.data.imgHeight)
    ctx.drawImage(
      this.data.imgPath,
      this.data.dragX / w * this.data.imgWidth,
      this.data.dragY / h * this.data.imgHeight,
      this.data.imgWidth * this.data.scale,
      this.data.imgHeight * this.data.scale
    )
    ctx.draw() // 绘制
    console.log(this.data.imgPath)
    setTimeout(() => { // 绘制有延迟
      wx.canvasToTempFilePath({
          canvasId: 'picBox',
          destWidth: that.data.isX ? 1700 : 1100,
          destHeight: that.data.isX ? 1100 : 1700,
          quality: 1,
          success: function(res) {
            console.log(res.tempFilePath)
            // TODO: 将图片传到后台
            let h,
              w,
              path = res.tempFilePath
            wx.getImageInfo({ // 获取图片信息
                src: path,
                success: function(res) {
                  console.log(res)
                  console.log("绘制" + res.path)

                  that.setData({
                    testUrl: res.path
                  })

                  //文件上传至后台
                  var tempFilePaths = res.path;
                  console.log(tempFilePaths + "虎猫鼠")

                  //获取编辑后的照片，并传至选择界面

                  let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

                  let prevPage = pages[pages.length - 2];
                  console.log(tempFilePaths)
                  prevPage.setData({
                    "pictureFormEdit": tempFilePaths,
                    "notPic": false, //是否有选择文件
                    "havePic": true, 
                  })
                  wx.navigateBack({
                    delta: 1, // 返回上一级页面。
                  })
            }
          })

      }
    })
  },
  500)

}
})